<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <style type="text/css">
		  html { height: 100% }
		  body { height: 100%; margin: 0px; padding: 0px }
		  #map_canvas { height: 100% }
        </style>
        <title>COEN-316 LocationServices Application</title>
    </head>
    <body onload="initialize();">
      <p><b id=info>User</b>'s recent locations.</p>
<div>
<select id="sessionList" onchange="masterControl();">
  <option>Live</option>
</select>
</div>
    <div id="map_canvas" style="width:100%; height:100%"></div>

<div id="fb-root"></div>
<script type="text/javascript"
    src="http://maps.google.com/maps/api/js?sensor=true">
</script>
<script src="http://code.jquery.com/jquery-1.4.2.js"></script>

 <script src="http://connect.facebook.net/en_US/all.js"></script>
 <script>
   FB.init({
     appId  : '150980391582655',
     status : true, // check login status
     cookie : true, // enable cookies to allow the server to access the session
     xfbml  : true  // parse XFBML
   });

var info   = document.getElementById('info');

var poly;
var map;
var latitude;
var longitude;
var userName;

//main function
function processing(){

	//make an ajax call to the server to get the last data
	$.getJSON('http://184.73.193.2/locInfo/?fbUserName='+ userName + '&callback=?', function(jsonObj) {
	 	//if the last data is not the same, then call addLatLng.
	 	if (latitude != jsonObj.latitude || longitude != jsonObj.longitude)
	 	{
		 	if (latitude == null && longitude == null){
		 		var marker = new google.maps.Marker({
		             map: map,
		             position: new google.maps.LatLng(jsonObj.latitude, jsonObj.longitude)
		         });
			}


	 		latitude = jsonObj.latitude;
	 		longitude = jsonObj.longitude;

	 		var latlong = new google.maps.LatLng(latitude, longitude);
	 		map.setCenter(latlong);


	 		addLatLng(latlong);
	 	}
	});
}

function fbLogin(){
	FB.getLoginStatus(

		function(response)
		{
	    	if (!response.session) {
	      	info.innerHTML = '<em>You must login using the controls at the top.</em>';
	      	return;
	    }

	    FB.api(
			      {
			        method: 'fql.query',
			        query: 'SELECT name FROM user WHERE uid=' + response.session.uid
			      },
			      function(response)
			      {
			        document.getElementById('info').innerHTML = response[0].name;
					userName = response[0].name.replace(/ /, "");
					getAllSession();
				   }
				)
	});

}

function getAllSession(){
	$.getJSON('http://184.73.193.2/locInfo/?fbUserName=' + userName + '&locInfoSession=ALLSESSIONS&callback=?', function(list) {
		for (var i in list) {
			$("#sessionList").append("<option>" + list[i].locInfoSession + "</option>");
		};
	});
}

function masterControl(){

    var selected = $("#sessionList option:selected").text();

	if (selected == 'Live'){
		startLive();
	}
	else{
		//make an ajax call to the server to get all data
		$.getJSON('http://184.73.193.2/locInfo/?fbUserName=homerSimpson&locInfoSession=' + selected + '&callback=?', function(jsonArray) {
			for (var i in jsonArray) {
				var latlong = new google.maps.LatLng(jsonArray[i].latitude, jsonArray[i].longitude);
				map.setCenter(latlong);
				addLatLng(latlong);
				//setTimeout(setToBlack, 800); //sleep 800 ms
			};
		});
	}
}

function initialize() {
  var sf = new google.maps.LatLng(37.719189, -122.445536);
  var myOptions = {
    zoom: 14,
    center: sf,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };

  map = new google.maps.Map(document.getElementById('map_canvas'), myOptions);

var marker = new google.maps.Marker({
		             map: map,
		             position: sf
		         });

  var polyOptions = {
    strokeColor: '#0000FF',
    strokeOpacity: 0.7,
    strokeWeight: 5
  }
  poly = new google.maps.Polyline(polyOptions);
  poly.setMap(map);

  fbLogin();
}

function startLive(){

	setInterval( "processing()", 1000 ); // call process every 1 seconds

}

/**
 * Handles click events on a map, and adds a new point to the Polyline.
 * @param {MouseEvent} mouseEvent
 */
function addLatLng(newLatLng) {

  var path = poly.getPath();

  // Because path is an MVCArray, we can simply append a new coordinate
  // and it will automatically appear
  path.push(newLatLng);

  // Add a new marker at the new plotted point on the polyline.
  //var marker = new google.maps.Marker({
  //  position: event.latLng,
  //  title: '#' + path.getLength(),
  //  map: map
  //});
}

</script>

    </body>
</html>